<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Magic Compass Alipay Barcode Merchant Demo</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#payWithAlipayButton').on('click', function (e) {
		$("#payWithAlipayButton").addClass("disabled");
		if(!$("#barcode").val()){
			$("#barcodeIsEmptyModal").modal();
			$("#payWithAlipayButton").removeClass("disabled");
		}else{
			$("#waitingModal").modal({
			  backdrop: 'static',
			  keyboard: false
			});
			send2Alipay();
			//$("#payWithAlipayButton").removeClass("disabled");
		}
	});
	
	$('#barcodeIsEmptyModal').on('hidden.bs.modal', function(event) {
		$("#barcode").focus();
	});
});
function send2Alipay(){
	$.ajax({
		url: '<%=request.getContextPath()%>/alipayBarcodePaymentController/alipayBarcodePayment',
		data: {
			customerALIPAYBarcode: $("#barcode").val(),
			merchantTransactionId: $("#mtId").val(),
		},
		success: function(data) {
		   alert("success");
		},
		type: 'GET'
	});
}
</script>
</head>
<body>
<div class="container">
	<div class="page-header">
		<h1 class="text-center">Select Payment Page</h1>
	</div>
	<br><br><br>
	<div class="page-header">
		<h3 class="text-center">Purchase Summary</h3>
	</div>
	<br>
	<form:form modelAttribute="merchantInputProductPageForm" method="POST" action="#">
		<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr>
			        <td class="lead">Product Name</td>
			        <td class="text-right lead">Price</td>
			        <td class="text-center lead">Quantity</td>
			        <td class="text-right lead">Total</td>
		        </tr>
	        </thead>
	        <tbody>
		        <c:forEach var="aProduct" items="${merchantInputProductPageForm.productList4Page}" varStatus="rowCount">
		        <tr>
		            <td>${aProduct.productName}</td>
		            <td class="text-right">${aProduct.productPrice}</td>
		            <td class="text-center">${aProduct.quantity}</td>
		            <td class="text-right">${aProduct.rowTotalAmount}</td>
		        </tr>
		        </c:forEach>
		        <tr>
		            <td colspan="3">&nbsp;Total:</td>
		            <td class="text-right">${merchantInputProductPageForm.totalPrice}</td>
		        </tr>
	        </tbody>            
	    </table>
	    <div class="row">
	    	<div class="col-md-4 text-right">&nbsp;</div>
			<div class="col-md-4">
				<input type="text" class="form-control" id="barcode" name="barcode" placeholder="Please scanner customer barcode" autofocus>
				<input type="hidden" id="mtId" name="mtId" value="${merchantInputProductPageForm.merchantTransactionId}">
			</div>
			<div class="col-md-4">&nbsp;</div>
		</div>
		<br>
	    <div class="row">
	    	<div class="col-md-4">&nbsp;</div>
			<div class="col-md-4">
				<button type="button" class="btn btn-primary btn-lg btn-block" name="PayWithAlipayButton" id="payWithAlipayButton">Pay with ALIPAY</button>
			</div>
			<div class="col-md-4">&nbsp;</div>
		</div>
	</form:form>
	
	<!-- Modal barcodeIsEmptyModal-->
	<div id="barcodeIsEmptyModal" class="modal fade" role="dialog">
	  <div class="modal-dialog">	
	    <!-- Modal content-->
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal">&times;</button>
	        <h4 class="modal-title">Error</h4>
	      </div>
	      <div class="modal-body alert-danger">
	        <p>Please scanner customer barcode before make payment.</p>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	      </div>
	    </div>	
	  </div>
	</div>
	
	<!-- Modal waitingModal-->
	<div id="waitingModal" class="modal fade" role="dialog">
	  <div class="modal-dialog">	
	    <!-- Modal content-->
	    <div class="modal-content">
	      <div class="modal-header">
	        <h4 class="modal-title">Please wait</h4>
	      </div>
	      <div class="modal-body">
	        <p>Please wait until transaction finished. Once it finished, this page will redirect to result page.</p>
	      </div>
	    </div>	
	  </div>
	</div>
	
</div>
</body>
</html>